<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的主页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/animate.css">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">

</head>

<body>
<!--导航-->
<nav th:replace="_fragments :: menu(5)"></nav>

<!--中间内容-->
<div class="m-padded-tb-max m-container animate__animated animate__fadeInUp">
    <div class="ui container">

        <div class="ui stackable grid">
            <div class="eleven wide column">
                <div class="ui segment">
                    <img src="https://images.unsplash.com/photo-1523225078415-687408717027?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1045&q=80"
                         style="height: 500px; width: 800px; background-position: center" alt="" class="ui rounded image">
                </div>
            </div>
            <div class="five wide column">
                <div class="ui center aligned top attached segment">
                    <div class="ui header">关于我</div>
                </div>
                <div class="ui attached segment">
                    <p class="m-font-kt m-text"> 我是一个对新鲜事物充满好奇，热爱挑战新事物的人，对人做事要么尽力做到最好，要么什么都不做！</p>
                    <p class="m-font-kt m-text"> 新的一年!祝大家,牛年发大财，游戏上大分！ </p>
                </div>
                <div class="ui center aligned attached segment">
                    <div class="ui orange basic label m-margin-tb-tiny">编程</div>
                    <div class="ui orange basic label m-margin-tb-tiny">写作</div>
                    <div class="ui orange basic label m-margin-tb-tiny">篮球</div>
                    <div class="ui orange basic label m-margin-tb-tiny">旅游</div>
                    <div class="ui orange basic label m-margin-tb-tiny">生活</div>
                    <div class="ui orange basic label m-margin-tb-tiny">游戏</div>
                    <div class="ui orange basic label m-margin-tb-tiny">美食</div>
                    <div class="ui orange basic label m-margin-tb-tiny">科技</div>
                </div>
                <div class="ui center aligned attached segment">
                    <div class="ui blue basic label m-margin-tb-tiny">数据库</div>
                    <div class="ui blue basic label m-margin-tb-tiny">C语言</div>
                    <div class="ui blue basic label m-margin-tb-tiny">数据结构</div>
                    <div class="ui blue basic label m-margin-tb-tiny">算法</div>
                    <div class="ui blue basic label m-margin-tb-tiny">web框架</div>
                    <div class="ui blue basic label m-margin-tb-tiny">SpringBoot</div>
                    <div class="ui blue basic label m-margin-tb-tiny">MySQL</div>
                </div>
                <div class="ui center aligned bottom attached segment">
                    <a href="#" class="ui qq circular icon button"> <i class="qq icon"></i> </a>
                    <a href="#" class="ui wechat circular icon button"> <i class="wechat icon"></i> </a>
                    <a href="#" class="ui email circular icon button" data-content="woshihuahuaa@outlook.com" data-position="bottom center">
                        <i class="envelope outline icon"></i>
                    </a>
                </div>
                <div class="ui qqQR flowing popup transition hidden">
                    <img src="../static/images/plug/qqQR.png" alt="" class="ui rounded bordered image"
                         style="width: 100px" th:src="@{/images/plug/qqQR.png}">
                    <div>QQ</div>
                </div>
                <div class="ui wechatQR flowing popup transition hidden">
                    <img src="../static/images/plug/WeChat.PNG" alt="" class="ui rounded bordered image"
                         style="width: 100px" th:src="@{/images/plug/WeChat.PNG}">
                    <div>微信</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--底部footer-->
<footer th:replace="_fragments :: footer"></footer>

<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--------板娘模板-------->
<script src="https://cdn.jsdelivr.net/gh/Fog-Forest/live2d@1.0.2/live2d_load/autoload.js"></script>
<!--/*/</th:block>/*/-->

<!--导航的手机端按钮的响应页面-->
<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide')
    })
    ;
    $('.qq').popup({
        popup: $('.qqQR.popup'),
        position: 'bottom center'
    })
    ;
    $('.wechat').popup({
        popup: $('.wechatQR.popup'),
        position: 'bottom center'
    })
    ;
    $('.email').popup();
</script>


</body>
</html>